<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户[${sendUserId!}]发起和用户[${receiverUserId!}]的聊天列表：</title>
</head>
<body>

<div>发送消息<font style="color: red;">【用户[${sendUserId!}]发起和用户[${receiverUserId!}]的聊天列表：】</font></div>
<br><br>
<a href="/">返回注册</a>
<br><br>
<a href="/user/getUserList?sendUserId=${sendUserId!}">返回用户列表</a>
<br><br>
<input type="text" id="msgContent">
<input type="button" value="点我发送" onclick="CHAT.chat()">

<div>接受消息：</div>
<div id="receiveMsg" style="background-color: gainsboro"></div>

<script src="/js/util.js" ></script>
<script type="application/javascript">

    var sendUserId = "${sendUserId!}";
    var receiverUserId = "${receiverUserId!}";

    window.CHAT = {
        socket: null,
        init: function () {
            if (window.WebSocket) {
                CHAT.socket = new WebSocket("ws://192.168.2.121:7078/ws")
                CHAT.socket.onopen = function () {
                    console.log("连接建立成功。。。");

                    // 构建ChatMsg
                    var chatMsg = new app.ChatMsg(sendUserId, null, null, null);
                    // 构建DataContent
                    var dataContent = new app.DataContent(app.CONNECT, chatMsg, null);
                    var msg = JSON.stringify(dataContent);
                    // 发送websocket
                    CHAT.chatMsg(msg);

                    // 拉取未签收消息列表
                    CHAT.fetchUnReadMsg();

                    // 定时发送心跳
                    setInterval("CHAT.keepalive()", 10000);
                },
                CHAT.onclose = function () {
                    console.log("连接建立关闭。。。");
                },
                CHAT.onerror = function () {
                    console.log("发生错误。。。");
                },
                CHAT.socket.onmessage = function (e) {
                    console.log("接受到消息：" + e.data);

                    // 转换为chatMsg对象
                    var chatMsg = JSON.parse(e.data);
                    var msg = chatMsg.msg;

                    var receiveMsg = document.getElementById("receiveMsg");
                    var html = receiveMsg.innerHTML;
                    receiveMsg.innerHTML = html + "<br/>用户" + chatMsg.receiverUserId + "：" + msg;

                    // 接收到消息后对消息进行签收
                    var dataContent = new app.DataContent(app.SIGNED, null, chatMsg.msgId);
                    var dataContentStr = JSON.stringify(dataContent);
                    CHAT.chatMsg(dataContentStr);
                }
            } else {
                alert("浏览器不支持websocker协议。。。")
            }
        },
        chat: function () {
            console.log("从输入框获取内容发送消息");
            var msg = document.getElementById("msgContent");
            // 如果当前websocket的状态是以打开，则直接发送，否则重连
            if (CHAT.socket != null && CHAT.socket != undefined
                && CHAT.socket.readyState == WebSocket.OPEN){

                // 发送消息
                // 构建ChatMsg
                var chatMsg = new app.ChatMsg(sendUserId, receiverUserId, msg.value, null);
                // 构建DataContent
                var dataContent = new app.DataContent(app.CHAT, chatMsg, null);
                var msg = JSON.stringify(dataContent);
                // 发送websocket
                CHAT.chatMsg(msg);

                var receiveMsg = document.getElementById("receiveMsg");
                var html = receiveMsg.innerHTML;
                receiveMsg.innerHTML = html + "<br/>我" + chatMsg.sendUserId + "：" + chatMsg.msg;

            }else {
                // 重连websocket
                console.log("断开连接了，正在重新连接中。。。");
                CHAT.init();
                // 延时一秒重新发送消息
                setTimeout("CHAT.reChat('" + msg.value + "')", "1000");
            }
        },
        chatMsg: function (msgStr) {
            console.log("直接发送消息");
            // 如果当前websocket的状态是以打开，则直接发送，否则重连
            if (CHAT.socket != null && CHAT.socket != undefined
                    && CHAT.socket.readyState == WebSocket.OPEN){
                CHAT.socket.send(msgStr);
            }else {
                // 重连websocket
                console.log("断开连接了，正在重新连接中。。。");
                CHAT.init();
                // 延时一秒重新发送消息
                setTimeout("CHAT.reChat('" + msgStr + "')", "1000");
            }
        },
        reChat: function (msg) {
            console.log("消息重新发送");
            CHAT.socket.send(msg);
        },
        fetchUnReadMsg: function() {
            console.log("每次重连后获取服务器未签收的消息")
        },
        keepalive: function () {
            console.log("发送心跳。。。")
            var dataContent = new app.DataContent(app.KEEPALIVE, null, null);
            var msg = JSON.stringify(dataContent);
            // 发送websocket
            CHAT.chatMsg(msg);
        }
    };

    CHAT.init();

</script>

</body>
</html>